<template>
    <view class="content">
		<u-sticky offset-top="0">
		    <view style="background-color: #f5f5f5;padding-top:0px">
		        <u-tabs  :list="tabs" @click="tab_change" :scrollable="false"></u-tabs>
		    </view>
		</u-sticky>
        <mescroll-uni style="padding-top: 10px;" class="my-mescroll" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" 
            @down="downCallback" @up="upCallback">
			<u-sticky offset-top="30">
				<view class="msg-list" style="padding-top: 20px;">
					<view  class="item"  v-for="(item, index) in dataList" :key="index" @click="showDetail(item)">
						<view class="head-box">
							<!-- 如果是文字 -->
							in
							<!-- 如果是图片 -->
							<!-- <image class="img" src="../../static/images/my_img.png" mode="aspectFill"></image> -->
						</view>
						<view class="detai">
							<view class="abs" v-if="item.isRead-0==0"></view>
							<text class="title">
								{{item.title}}

							</text>
							<text class="cont">{{item.content}}</text>
							<text class="title" v-if="item.updateTime">{{item.updateTime}}</text>
						</view>
					</view>

				</view>
			</u-sticky>
        </mescroll-uni>
    </view>
</template>

<script>
    import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
    import api from '@/api/api.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                mescroll: undefined,
                downOption: {
                    auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
				reload:false,
                upOption: {
                    onScroll: true,
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                dataList: [],
                msgType: undefined,
				isRead:0,
				tabs: [
				    { name: '未读' },
				    { name: '已读' },
				],
            }
        },
		onShow() {
			if(this.reload){
				this.reload = false;
				this.upOption.page.num = 1;
				this.getMsgList(this.upOption.page);
				// wx.reload();
			}
		},
        onLoad(options) {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
            this.msgType = options.msgType
            var that = this;
            var temp;
            if (this.msgType == 1) //客户
            {
                temp = this.baseConfig.customerTemp;
            } else if (this.msgType == 2) //合同
            {
                temp = this.baseConfig.contractTemp;
            } else if (this.msgType == 4) //日程
            {
                temp = this.baseConfig.eventTemp;
            }
            // if (temp != "") {
            //     uni.showModal({
            //         title: '提示',
            //         content: '小程序需要订阅一次性消息',
            //         success(res) {
            //             if (res.confirm) {
            //                 uni.requestSubscribeMessage({
            //                     tmplIds: temp,
            //                     success(res) {},
            //                     fail(res) {
            //                         console.log(res.errMsg)
            //                     }
            //                 })
            //             }
            //         }
            //     })
            // }
        },
        methods: {
			tab_change(e) {
				var that = this;
			    let i = e.index;
				console.log(i);
			    this.isRead = i -0;
				this.upOption.page.num = 1;
			    this.upCallback(this.upOption.page);
			
			},
            // mescroll组件初始化的回调,可获取到mescroll对象
            mescrollInit(mescroll) {
                this.mescroll=mescroll;
            },
            /*下拉刷新的回调 */
            downCallback(mescroll) {
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                this.getMsgList(page);
            },
            getMsgList(page) {
                console.log(page.num)
				var data = { page: page.num, type: this.msgType,isRead:0};
				if(this.isRead!=0){
					data.isRead = this.isRead;
				}
                var that = this;
                api.getMsgList(data).then(
                    res => {
                        if (res.code == 200) {
                            //设置列表数据
                            if (page.num == 1) {
                                that.dataList = res.data.list;

                            } else {
                                that.dataList = that.dataList.concat(res.data.list);
                            }
                            that.mescroll.endBySize(res.data.list.length, res.data.total);

                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                            that.dataList = null;
                            that.mescroll.endErr();
                            // that.mescroll.endSuccess(0);
                        }
                    },
                    rej => {}
                );
            },
            // 查看详情
            showDetail(item) {
                api.setRead({ "msgId": item.msgId, "isRead": 1 }).then(r => {
                    item.isRead = 1
					this.reload = true;
                    if (item.title.indexOf("二维码") > -1) {
                        uni.navigateTo({
                            url: `/pages/customer/seas`
                        })
                        return
                    };
					if (item.title.indexOf("兼职") > -1){
						this.reload = false;
						this.upOption.page.num = 1;
						this.getMsgList(this.upOption.page);
						return 
					}
                    uni.navigateTo({
                        url: `/pages/customer/customDetail?customerId=${item.customerId}`
                    })
                })

                return


                this.setS('msgD', item)
                uni.navigateTo({
                    url: `./detail`
                })

                return
                console.log(item)
                if (item.msgType == 1) {

                    var ids = item.objId.split(',');
                    console.log(ids)
                    uni.navigateTo({
                        url: '../customer/customDetail?customerId=' + ids[0] + "&customerUserId=" + ids[1]
                    })
                } else if (item.msgType == 2) {
                    uni.navigateTo({
                        url: '../user/contract/detail?contractId=' + item.objId
                    })

                } else if (item.msgType == 3) {
                    uni.navigateTo({
                        url: '../user/receivables/detail?receivablesId=' + item.objId
                    })
                } else if (item.msgType == 4) {
                    uni.navigateTo({
                        url: 'event?eventId=' + item.objId
                    })
                }

            },
        }
    }
</script>

<style scoped lang="scss">
    .content {}

    .msg-list {
        background: #fff;

        .item {
            border-bottom: 1px solid #f7f7f7;
            padding: 20upx 30upx;
            display: flex;
            align-items: center;

            &:last-child {
                border-bottom: none;
            }

            .head-box {
                width: 120upx;
                height: 120upx;
                line-height: 100upx;
                border-radius: 50%;
                background: #0aAC44;
                border: 2px solid #fff;
                font-size: 30upx;
                color: #fff;
                text-align: center;
                margin-right: 20upx;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;

                .img {
                    width: 100%;
                    height: 100%;

                }
            }

            .detai {
                display: flex;
                flex-direction: column;
                position: relative;

                .abs {
                    position: absolute;
                    width: 20rpx;
                    height: 20rpx;
                    border-radius: 50rpx;
                    background-color: red;
                    left: -125rpx;
                    top: -6rpx;
                }

                .title {
                    font-size: 28upx;
                    color: #999;
                }

                .cont {
                    font-size: 28upx;
                    color: #333;
                    padding: 20upx 0;
                }
            }
        }
    }
</style>